/*定位功能
--------------------------------------------------------*/
var myPosition = document.querySelector("#allmap");
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

function myFun(result){
    var cityName = result.name;
    map.setCenter(cityName);
    // alert("当前定位城市:"+cityName);
    console.log(cityName);
    myPosition.innerHTML = cityName;
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);

/*切换城市功能
------------------------------------------------------------*/
var changePositionWrapper = document.querySelector(".change-position-wrapper");



/*城市列表数据
---------------------------------------------------------------------*/
var arr = [
    {
        'province': '安徽省',
        'cities': {
            'city01': '淮南市',
            'city02': '马鞍山市',
            'city03': '芜湖市',
            'city04': '安庆市',
            'city05': '亳州市',
            'city06': '阜阳市',
            'city07': '淮北市',
            'city08': '六安市',
            'city09': '铜陵市',
            'city10': '宣城市',
            'city11': '合肥市',
            'city12': '蚌埠市',
            'city13': '滁州市',
            'city14': '黄山市',
            'city15': '宿州市',
            'city16': '池州市'
        }
    },
    {
        'province': '北京',
        'cities': {
            'city01': '北京市'
        }
    },
    {
        'province': '福建省',
        'cities': {
            'city01': '泉州市',
            'city02': '三明市',
            'city03': '漳州市',
            'city04': '福州市',
            'city05': '龙岩市',
            'city06': '宁德市',
            'city07': '南平市',
            'city08': '厦门市',
            'city09': '莆田市'
        }
    },
    {
        'province': '甘肃省',
        'cities': {
            'city01': '张掖市',
            'city02': '定西市',
            'city03': '酒泉市',
            'city04': '陇南市',
            'city05': '庆阳市',
            'city06': '天水市',
            'city07': '白银市',
            'city08': '甘南藏族自治州',
            'city09': '临夏回族自治州',
            'city10': '平凉市',
            'city11': '兰州市',
            'city12': '武威市',
            'city13': '金昌市',
            'city14': '嘉峪关市'
        }
    },{
        'province': '海南省',
        'cities': {
            'city01': '海口市',
            'city02': '澄迈县',
            'city03': '临高县',
            'city04': '保亭黎族苗族自治县',
            'city05': '儋州市',
            'city06': '屯昌县',
            'city07': '昌江黎族自治县',
            'city08': '定安县',
            'city09': '万宁市',
            'city10': '乐东黎族自治县',
            'city11': '琼海市',
            'city12': '文昌市',
            'city13': '陵水黎族自治县',
            'city14': '三沙市',
            'city15': '五指山市',
            'city16': '琼中黎族苗族自治县',
            'city17': '三亚市',
            'city18': '东方市',
            'city19': '白沙黎族自治县'
        }
        
    },{
        'province': '广东省',
        'cities': {
            'city01': '湛江市',
            'city02': '珠海市',
            'city03': '广州市',
            'city04': '河源市',
            'city05': '揭阳市',
            'city06': '梅州市',
            'city07': '汕头市',
            'city08': '肇庆市',
            'city09': '深圳市',
            'city10': '佛山市',
            'city11': '江门市',
            'city12': '东莞市',
            'city13': '韶关市',
            'city14': '云浮市',
            'city15': '潮州市',
            'city16': '惠州市',
            'city17': '茂名市',
            'city18': '清远市',
            'city19': '阳江市',
            'city20': '中山市',
            'city21': '汕尾市'
        }
        
    },{
        'province': '广西',
        'cities': {
            'city01': '百色市',
            'city02': '崇左市',
            'city03': '贵港市',
            'city04': '桂林市',
            'city05': '贺州市',
            'city06': '柳州市',
            'city07': '玉林市',
            'city08': '南宁市',
            'city09': '北海市',
            'city10': '河池市',
            'city11': '梧州市',
            'city12': '防城港市',
            'city13': '来宾市',
            'city14': '钦州市'
        }
    },{
        'province': '河南省',
        'cities': {
            'city01': '信阳市',
            'city02': '郑州市',
            'city03': '周口市',
            'city04': '焦作市',
            'city05': '开封市',
            'city06': '洛阳市',
            'city07': '南阳市',
            'city08': '濮阳市',
            'city09': '商丘市',
            'city10': '新乡市',
            'city11': '许昌市',
            'city12': '鹤壁市',
            'city13': '驻马店',
            'city14': '市平顶山市',
            'city15': '安阳市',
            'city16': '漯河市',
            'city17': '三门峡市',
            'city18': '济源市'
        }  
    },{
        'province': '贵州省',
        'cities': {
            'city01': '黔东南苗族侗族自治州',
            'city02': '黔南布依族苗族自治州',
            'city03': '铜仁市',
            'city04': '遵义市',
            'city05': '贵阳市',
            'city06': '毕节市',
            'city07': '黔西南布依族苗族自治州',
            'city08': '安顺市',
            'city09': '六盘水市'
           
        }
    },{
        'province': '河北省',
        'cities': {
            'city01': '沧州市',
            'city02': '保定市',
            'city03': '承德市',
            'city04': '邢台市',
            'city05': '邯郸市',
            'city06': '廊坊市',
            'city07': '张家口市',
            'city08': '唐山市',
            'city09': '石家庄市',
            'city10': '衡水市',
            'city11': '秦皇岛市'
        }
    },{
        'province': '黑龙江省',
        'cities': {
            'city01': '佳木斯市',
            'city02': '齐齐哈尔市',
            'city03': '哈尔滨市',
            'city04': '双鸭山市',
            'city05': '绥化市',
            'city06': '伊春市',
            'city07': '大兴安岭地区',
            'city08': '鸡西市',
            'city09': '牡丹江市',
            'city10': '大庆市',
            'city11': '黑河市',
            'city12': '鹤岗市',
            'city13': '七台河市'
        }
    },{
        'province': '湖北省',
        'cities': {
            'city01': '随州市',
            'city02': '襄阳市',
            'city03': '宜昌市',
            'city04': '天门市',
            'city05': '鄂州市',
            'city06': '黄冈市',
            'city07': '荆州市',
            'city08': '十堰市',
            'city09': '咸宁市',
            'city10': '孝感市',
            'city11': '武汉市',
            'city12': '荆门市',
            'city13': '恩施土家族苗族自治州',
            'city14': '黄石市',
            'city15': '仙桃市',
            'city16': '潜江市',
            'city17': '神农架',
            'city18': '神农架林区'
        }
    },{
        'province': '湖南省',
        'cities': {
            'city01': '湘潭市',
            'city02': '怀化市',
            'city03': '益阳市',
            'city04': '岳阳市',
            'city05': '株洲市',
            'city06': '长沙市',
            'city07': '郴州市',
            'city08': '衡阳市',
            'city09': '娄底市',
            'city10': '常德市',
            'city11': '湘西土家族苗族自治州',
            'city12': '永州市',
            'city13': '邵阳市',
            'city14': '张家界市'
        }
    },{
        'province': '吉林省',
        'cities': {
            'city01': '白城市',
            'city02': '吉林市',
            'city03': '松原市',
            'city04': '长春市',
            'city05': '四平市',
            'city06': '延边朝鲜族自治州',
            'city07': '白山市',
            'city08': '通化市',
            'city09': '辽源市'
        }
    },{
        'province': '江苏省',
        'cities': {
            'city01': '常州市',
            'city02': '扬州市',
            'city03': '连云港市',
            'city04': '苏州市',
            'city05': '泰州市',
            'city06': '徐州市',
            'city07': '南京市',
            'city08': '淮安市',
            'city09': '南通市',
            'city10': '宿迁市',
            'city11': '盐城市',
            'city12': '镇江市',
            'city13': '无锡市',
            'city14': '太仓市',
            'city15': '常熟市',
            'city16': '昆山市'
        }
    },{
        'province': '江西省',
        'cities': {
            'city01': '南昌市',
            'city02': '赣州市',
            'city03': '吉安市',
            'city04': '九江市',
            'city05': '萍乡市',
            'city06': '宜春市',
            'city07': '抚州市',
            'city08': '上饶市',
            'city09': '鹰潭市',
            'city09': '景德镇市',
            'city09': '新余市'
        }
    },{
        'province': '辽宁省',
        'cities': {
            'city01': '葫芦岛市',
            'city02': '鞍山市',
            'city03': '辽阳市',
            'city04': '营口市',
            'city05': '丹东市',
            'city06': '沈阳市',
            'city07': '阜新市',
            'city08': '锦州市',
            'city09': '朝阳市',
            'city10': '铁岭市',
            'city11': '大连市',
            'city12': '本溪市',
            'city13': '盘锦市',
            'city14': '抚顺市'
        }
    },{
        'province': '内蒙古',
        'cities': {
            'city01': '乌兰察布市',
            'city02': '锡林郭勒盟',
            'city03': '阿拉善盟',
            'city04': '包头市',
            'city05': '鄂尔多斯市',
            'city06': '呼伦贝尔市',
            'city07': '呼和浩特市',
            'city08': '赤峰市',
            'city09': '乌海市',
            'city10': '兴安盟',
            'city11': '巴彦淖尔市',
            'city12': '通辽市'
        }
    },{
        'province': '宁夏',
        'cities': {
            'city01': '固原市',
            'city02': '银川市',
            'city03': '吴忠市',
            'city04': '石嘴山市',
            'city05': '中卫市'
        }
    },{
        'province': '青海省',
        'cities': {
            'city01': '西宁市',
            'city02': '海北藏族自治州',
            'city03': '海西蒙古族藏族自治州',
            'city04': '果洛藏族自治州',
            'city05': '海南藏族自治州',
            'city06': '海东市',
            'city07': '玉树藏族自治州',
            'city08': '黄南藏族自治州'
        }
    },{
        'province': '山东省',
        'cities': {
            'city01': '淄博市',
            'city02': '德州市',
            'city03': '菏泽市',
            'city04': '莱芜市',
            'city05': '临沂市',
            'city06': '青岛市',
            'city07': '潍坊市',
            'city08': '烟台市',
            'city09': '济南市',
            'city10': '济宁市',
            'city11': '东营市',
            'city12': '威海市',
            'city13': '枣庄市',
            'city14': '聊城市',
            'city15': '泰安市',
            'city16': '滨州市',
            'city17': '日照市'
        }
    },{
        'province': '山西省',
        'cities': {
            'city01': '长治市',
            'city02': '大同市',
            'city03': '忻州市',
            'city04': '晋中市',
            'city05': '运城市',
            'city06': '临汾市',
            'city07': '吕梁市',
            'city08': '太原市',
            'city09': '晋城市',
            'city10': '朔州市',
            'city11': '阳泉市'
        }
    },{
        'province': '陕西省',
        'cities': {
            'city01': '铜川市',
            'city02': '咸阳市',
            'city03': '延安市',
            'city04': '榆林市',
            'city05': '西安市',
            'city06': '宝鸡市',
            'city07': '汉中市',
            'city08': '渭南市',
            'city09': '安康市',
            'city10': '商洛市'
        }
    },{
        'province': '上海',
        'cities': {
            'city01': '上海市'
        }
    },{
        'province': '四川省',
        'cities': {
            'city01': '甘孜藏族自治州',
            'city02': '泸州市',
            'city03': '绵阳市',
            'city04': '南充市',
            'city05': '雅安市',
            'city06': '资阳市',
            'city07': '成都市',
            'city08': '阿坝藏族羌族自治州',
            'city09': '广元市',
            'city10': '德阳市',
            'city11': '凉山彝族自治州',
            'city12': '广安市',
            'city13': '眉山市',
            'city14': '遂宁市',
            'city15': '宜宾市',
            'city16': '达州市',
            'city17': '乐山市',
            'city18': '内江市',
            'city19': '攀枝花市',
            'city20': '自贡市',
            'city21': '巴中市'
        }  
    },{
        'province': '天津',
        'cities': {
            'city01': '天津市'
        }
    },{
        'province': '西藏自治区',
        'cities': {
            'city01': '昌都市',
            'city02': '那曲地区',
            'city03': '日喀则地区',
            'city04': '拉萨市',
            'city05': '山南地区',
            'city06': '林芝地区',
            'city07': '阿里地区'
        }
    },{
        'province': '新疆维吾尔自治区',
        'cities': {
            'city01': '乌鲁木齐市',
            'city02': '昌吉回族自治州',
            'city03': '阿克苏地区',
            'city04': '和田地区',
            'city05': '克拉玛依市',
            'city06': '伊犁哈萨克自治州',
            'city07': '巴音郭楞蒙古自治州',
            'city08': '喀什地区',
            'city09': '塔城地区',
            'city10': '五家渠市',
            'city11': '阿勒泰地区',
            'city12': '哈密地区',
            'city13': '阿拉尔市',
            'city14': '克孜勒苏柯尔克孜自治州',
            'city15': '博尔塔拉蒙古自治州',
            'city16': '吐鲁番地区',
            'city17': '北屯市',
            'city18': '石河子市',
            'city19': '图木舒克市'
        } 
    },{
        'province': '云南省',
        'cities': {
            'city01': '昭通市',
            'city02': '昆明市',
            'city03': '楚雄彝族自治州',
            'city04': '大理白族自治州',
            'city05': '红河哈尼族彝族自治州',
            'city06': '临沧市',
            'city07': '普洱市',
            'city08': '文山壮族苗族自治州',
            'city09': '玉溪市',
            'city10': '保山市',
            'city11': '丽江市',
            'city12': '曲靖市',
            'city13': '德宏傣族景颇族自治州',
            'city14': '怒江傈僳族自治州',
            'city15': '西双版纳傣族自治州',
            'city16': '迪庆藏族自治州'
        }
    },{
        'province': '浙江省',
        'cities': {
            'city01': '杭州市',
            'city02': '丽水市',
            'city03': '嘉兴市',
            'city04': '衢州市',
            'city05': '台州市',
            'city06': '舟山市',
            'city07': '湖州市',
            'city07': '宁波市',
            'city07': '温州市',
            'city07': '金华市',
            'city08': '绍兴市'
        }
    },{
        'province': '重庆',
        'cities': {
            'city01': '重庆市'
        }
    } 
];

var oContent1 = document.querySelector(".to-be-remove");
var oContent1Title = document.querySelector(".content1-title");
var oContent1Cities = oContent1.getElementsByTagName("p")[0];
// console.log(oContent1Cities);


//循环创建 span 用于展示省份
function createProvince(params) {
    for (var i = 0;i < arr.length;i++) {
        var oSpan = document.createElement("span");
        oSpan.innerHTML = arr[i].province;
        oContent1Cities.appendChild(oSpan);
    }  
}
createProvince();


var content1 = document.querySelector(".content1"); 
var content1H3 = content1.getElementsByTagName("h3")[0];
var getSpan = oContent1Cities.getElementsByTagName("span");

function getCities(params) {

    for (var i = 0;i < getSpan.length;i ++) {
        getSpan[i].index = i;
        getSpan[i].onclick = function () {
            console.log('click');
            var spanContent = this.innerHTML;
            var provinceH3 = document.createElement('h3');
            oContent1Title.insertBefore(provinceH3, content1H3);
            provinceH3.innerHTML = spanContent;
            provinceH3.style.color = "#000";
    
            oContent1.removeChild(oContent1Cities); //移除包裹所有城市 span 元素的 p 元素
    
            var currentCities = arr[this.index].cities;
    
            //创建 p 元素
            var oContent1CitiesName = document.createElement("p");
            //将 p 元素原来的类名添加上,赋予其样式
            oContent1CitiesName.className = "content1-cities";
    
            for (var city in currentCities) {
                
                //创建 span 元素
                var oSpanCities = document.createElement("span");
                
                //将城市名文本插入到 span 中
                oSpanCities.innerHTML = currentCities[city];
    
                //将 span 插入到 p 元素中
                oContent1CitiesName.appendChild(oSpanCities);
    
            }
    
            //将 p 元素插入到 oContent1 中
            oContent1.appendChild(oContent1CitiesName);

            //查看当前省份所有城市名的内容
            console.log(oContent1CitiesName.children);

            //将当前省份所有城市名内容保存到变量 cities 中
            var cities = oContent1CitiesName.children;

            for (let i = 0;i < cities.length;i ++) {
                cities[i].onclick = function (params) {
                    console.log(this.innerHTML);
                    //点击城市时,创建一个 h3 标签,并添加到标题的省份后面
                    var citiesH3 = document.createElement('h3');
                    citiesH3.style.color = '#000';
                    citiesH3.innerHTML = this.innerHTML;

                    oContent1Title.insertBefore(citiesH3, content1H3);

                    oContent1Title.removeChild(content1H3);

                    changePositionWrapper.style.opacity = '0';
                    myPosition.innerHTML = this.innerHTML;

                    setTimeout(function name(params) {
                        changePositionWrapper.style.display = 'none';
                        oContent1Title.innerHTML = "<h3>请选择</h3>";
                        oContent1CitiesName.innerHTML = "";
                    }, 600)
                }
            }
        }
    }
}
getCities();


/*点击修改按钮显示城市切换页面
--------------------------------------------------------------------*/
var handleChangeClick = document.querySelector(".change");
handleChangeClick.onclick = function (params) {
    var oContent1Cities = oContent1.getElementsByTagName("p")[0];
    if (oContent1Title.innerHTML === "<h3>请选择</h3>") {
        for (var i = 0;i < arr.length;i++) {
            var oSpan = document.createElement("span");
            oSpan.innerHTML = arr[i].province;
            oContent1Cities.appendChild(oSpan);
        }  

        //重新获取新生成的 h3 标签和所有 span 标签 
        var content1H3 = content1.getElementsByTagName("h3")[0];
        var getSpan = oContent1Cities.getElementsByTagName("span");
        for (var i = 0;i < getSpan.length;i ++) {
            getSpan[i].index = i;
            getSpan[i].onclick = function () {
                // console.log('click');
                var spanContent = this.innerHTML;
                var provinceH3 = document.createElement('h3');
                oContent1Title.insertBefore(provinceH3, content1H3);
                provinceH3.innerHTML = spanContent;
                provinceH3.style.color = "#000";
        
                oContent1.removeChild(oContent1Cities); //移除包裹所有城市 span 元素的 p 元素
        
                var currentCities = arr[this.index].cities;
        
                //创建 p 元素
                var oContent1CitiesName = document.createElement("p");
                //将 p 元素原来的类名添加上,赋予其样式
                oContent1CitiesName.className = "content1-cities";
        
                for (var city in currentCities) {
                    
                    //创建 span 元素
                    var oSpanCities = document.createElement("span");
                    
                    //将城市名文本插入到 span 中
                    oSpanCities.innerHTML = currentCities[city];
        
                    //将 span 插入到 p 元素中
                    oContent1CitiesName.appendChild(oSpanCities);
        
                }
        
                //将 p 元素插入到 oContent1 中
                oContent1.appendChild(oContent1CitiesName);
    
                //查看当前省份所有城市名的内容
                console.log(oContent1CitiesName.children);
    
                //将当前省份所有城市名内容保存到变量 cities 中
                var cities = oContent1CitiesName.children;
    
                for (let i = 0;i < cities.length;i ++) {

                    cities[i].onclick = function () {
                        // console.log(this.innerHTML);

                        //点击城市时,创建一个 h3 标签,并添加到标题的省份后面
                        var citiesH3 = document.createElement('h3');
                        citiesH3.style.color = '#000';
                        citiesH3.innerHTML = this.innerHTML;
    
                        oContent1Title.insertBefore(citiesH3, content1H3);
    
                        oContent1Title.removeChild(content1H3);
    
                        changePositionWrapper.style.opacity = '0';
                        myPosition.innerHTML = this.innerHTML;
    
                        setTimeout(function name() {
                            changePositionWrapper.style.display = 'none';
                            oContent1Title.innerHTML = "<h3>请选择</h3>";
                            oContent1CitiesName.innerHTML = "";
                        }, 600)
                    }
                }
            }
        }
    }
    // console.log(oContent1Cities);

    //城市选择框显示
    changePositionWrapper.style.display = 'block';
    changePositionWrapper.style.opacity = '1';
    
}

var handleIconFontBtn = document.querySelector(".to-be-remove .iconfont");
handleIconFontBtn.onclick = function () {
    changePositionWrapper.style.opacity = '0';
    var oContent1CitiesName = oContent1.getElementsByTagName("p")[0];
    setTimeout(function name(params) {
        changePositionWrapper.style.display = 'none';
        oContent1Title.innerHTML = "<h3>请选择</h3>";
        oContent1CitiesName.innerHTML = "";
    }, 600)
}

